// ----------------------------- 初始化剪裁框-----------------------------------
let image = $('#image');

let option = {
  aspectRatio: 1,
  preview: '.img-preview'
}

image.cropper(option);


// ----------------------------- 点击 上传 能够触发文件域的单击事件 ------------------
// button:contains("标签的内容")  ---- 查找包含“内容”的标签
$('button:contains("上传")').on('click', function () {
  $('#file').trigger('click');
})

// ----------------------------- 更换剪裁区的图片 -----------------------------------
$('#file').on('change', function () {
  // console.dir(this);
  if (this.files.length > 0) {
    let fileObj = this.files[0];
    let url = URL.createObjectURL(fileObj);
    image.cropper('replace', url);
  }
})


// ----------------------------- 点击 确定，剪裁图片，提交给接口 --------------------------
$('button:contains("确定")').on('click', function () {
  // 1. 剪裁图片 ==> 得到canvas(h5的画布)
  let canvas = image.cropper('getCroppedCanvas', { width: 30, height: 30 });
  // 2. 把canvas转换为base64格式 （因为接口需要base64格式）
  let base64 = canvas.toDataURL(); // 原生的方法
  // 3. 按照接口要求提交
  $.ajax({
    type: 'POST',
    url: '/my/user/avatar',
    data: { avatar: base64 },
    success: function (res) {
      if (res.status === 0) {
        layer.msg(res.message);
        window.parent.getUserInfo(); // 调用父页面的方法
      }
    }
  });
})